<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('component.cropper.modalTitle')"
    width="50%"
    :can-fullscreen="false"
    :ok-text="t('component.cropper.okText')"
    @register="register"
    @ok="handleOk"
  >
    <Spin :spinning="loading">
      <div :class="prefixCls">
        <div :class="`${prefixCls}-left`">
          <div :class="`${prefixCls}-cropper`">
            <CropperImage
              v-if="src"
              :src="src"
              height="300px"
              :circled="circled"
              @cropend="handleCropend"
              @ready="handleReady"
            />
          </div>

          <div :class="`${prefixCls}-toolbar`">
            <Upload :file-list="[]" accept="image/*" :before-upload="handleBeforeUpload">
              <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
                <a-button size="small" type="primary">
                  <template #icon><UploadOutlined /></template>
                </a-button>
              </Tooltip>
            </Upload>
            <Space>
              <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('reset')"
                >
                  <template #icon><ReloadOutlined /></template>
                </a-button>
              </Tooltip>
              <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('rotate', -45)"
                >
                  <template #icon><RotateLeftOutlined /></template>
                </a-button>
              </Tooltip>
              <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('rotate', 45)"
                >
                  <template #icon><RotateRightOutlined /></template>
                </a-button>
              </Tooltip>
              <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('scaleX')"
                >
                  <template #icon><ColumnWidthOutlined /></template>
                </a-button>
              </Tooltip>
              <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('scaleY')"
                >
                  <template #icon><ColumnHeightOutlined /></template>
                </a-button>
              </Tooltip>
              <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('zoom', 0.1)"
                >
                  <template #icon><ZoomInOutlined /></template>
                </a-button>
              </Tooltip>
              <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="!src"
                  @click="handlerToolbar('zoom', -0.1)"
                >
                  <template #icon><ZoomOutOutlined /></template>
                </a-button>
              </Tooltip>
            </Space>
          </div>
        </div>
        <div :class="`${prefixCls}-right`">
          <div :class="`${prefixCls}-preview`">
            <img v-if="previewSource" :src="previewSource" :alt="t('component.cropper.preview')" />
          </div>
          <template v-if="previewSource">
            <div :class="`${prefixCls}-group`">
              <Avatar :src="previewSource" size="large" />
              <Avatar :src="previewSource" :size="48" />
              <Avatar :src="previewSource" :size="64" />
              <Avatar :src="previewSource" :size="80" />
            </div>
          </template>
        </div>
      </div>
    </Spin>
  </BasicModal>
</template>
<script lang="ts">
  import type { CropendResult, Cropper } from './typing'

  import { defineComponent, ref } from 'vue'
  import CropperImage from './Cropper.vue'
  import { Space, Upload, Avatar, Tooltip, Spin } from 'ant-design-vue'
  import { BasicModal, useModalInner } from '@/components/core/Modal'
  import { dataURLtoBlob } from '@/utils/file/base64Conver'
  import { isFunction } from '@/utils/is'
  import { useI18n } from '@/hooks/useI18n'
  import {
    UploadOutlined,
    ReloadOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    ColumnWidthOutlined,
    ColumnHeightOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
  } from '@ant-design/icons-vue'

  type apiFunParams = { file: Blob; name: string; filename: string }

  const props = {
    circled: { type: Boolean, default: true },
    uploadApi: {
      type: Function, // as PropType<(params: apiFunParams) => Promise<any>>
    },
  }

  export default defineComponent({
    name: 'CropperModal',
    components: {
      BasicModal,
      Space,
      CropperImage,
      Upload,
      Avatar,
      Tooltip,
      Spin,
      UploadOutlined,
      ReloadOutlined,
      RotateLeftOutlined,
      RotateRightOutlined,
      ColumnWidthOutlined,
      ColumnHeightOutlined,
      ZoomInOutlined,
      ZoomOutOutlined,
    },
    props,
    emits: ['uploadSuccess', 'register'],
    setup(props, { emit }) {
      let filename = ''
      const src = ref('')
      const previewSource = ref('')
      const cropper = ref<Cropper>()
      const loading = ref(false)
      let scaleX = 1
      let scaleY = 1

      const prefixCls = 'mom-cropper-am'
      const [register, { closeModal, setModalProps }] = useModalInner()
      const { t } = useI18n()

      // Block upload
      function handleBeforeUpload(file: File) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        src.value = ''
        previewSource.value = ''
        reader.onload = function (e) {
          src.value = (e.target?.result as string) ?? ''
          filename = file.name
        }
        return false
      }

      function handleCropend({ imgBase64 }: CropendResult) {
        previewSource.value = imgBase64
      }

      function handleReady(cropperInstance: Cropper) {
        cropper.value = cropperInstance
      }

      function handlerToolbar(event: string, arg?: number) {
        if (event === 'scaleX') {
          scaleX = arg = scaleX === -1 ? 1 : -1
        }
        if (event === 'scaleY') {
          scaleY = arg = scaleY === -1 ? 1 : -1
        }
        cropper?.value?.[event]?.(arg)
      }

      async function handleOk() {
        loading.value = true
        const uploadApi = props.uploadApi
        if (uploadApi && isFunction(uploadApi)) {
          const blob = dataURLtoBlob(previewSource.value)
          try {
            setModalProps({ confirmLoading: true })
            const { data } = await uploadApi({ name: 'file', file: blob, filename })
            emit('uploadSuccess', { source: previewSource.value, data })
            closeModal()
          } finally {
            setModalProps({ confirmLoading: false })
            loading.value = false
          }
        }
        loading.value = false
      }

      return {
        t,
        loading,
        prefixCls,
        src,
        register,
        previewSource,
        handleBeforeUpload,
        handleCropend,
        handleReady,
        handlerToolbar,
        handleOk,
      }
    },
  })
</script>

<style lang="less" scoped>
  @prefix-cls: ~'mom-cropper-am';

  .@{prefix-cls} {
    display: flex;

    &-left,
    &-right {
      height: 340px;
    }

    &-left {
      width: 55%;
    }

    &-right {
      width: 45%;
    }

    &-cropper {
      height: 300px;
      background: #eee;
      background-image: linear-gradient(
          45deg,
          rgb(0 0 0 / 25%) 25%,
          transparent 0,
          transparent 75%,
          rgb(0 0 0 / 25%) 0
        ),
        linear-gradient(
          45deg,
          rgb(0 0 0 / 25%) 25%,
          transparent 0,
          transparent 75%,
          rgb(0 0 0 / 25%) 0
        );
      background-position:
        0 0,
        12px 12px;
      background-size: 24px 24px;
    }

    &-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }

    &-preview {
      width: 220px;
      height: 220px;
      margin: 0 auto;
      overflow: hidden;
      // border: 1px solid @border-color-base;
      border-width: 1px;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-group {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #d9d9d9;
    }
  }
</style>
